<template>
  <div class="page">
    <div class="q-m-md q-mb-md">
      <q-btn
        color="primary"
        label="添加歌曲"
        @click="createDialog.showDialog()"
      />
    </div>

    <div class="q-pa-md">
      <q-table
        :rows="data"
        :columns="columns"
        @request="fetchData"
        row-key="name"
      >
        <template v-slot:body-cell-status="props">
          <q-td :props="props">
            <q-badge
              :label="musicStatus[props.value]"
              outline
              :color="musicStatusColor[props.value]"
            />
          </q-td>
        </template>
        <template v-slot:body-cell-file="props">
          <q-td :props="props">
            <!-- <div v-if="props.value.uri">aa</div> -->
            <audio controls :src="props.value.uri" />
          </q-td>
        </template>
        <template v-slot:body-cell-operation="props">
          <q-td :props="props">
            <q-btn-dropdown
              split
              size="sm"
              label="编辑"
              color="primary"
              @click="edit(props.row)"
            >
              <!-- <q-list dense>
                <q-item
                  v-if="props.row.status !== 'PUBLISHED'"
                  clickable
                  v-close-popup
                  @click="publishMusic(props.row.id)"
                >
                  <q-item-section>
                    <q-item-label> 上架 </q-item-label>
                  </q-item-section>
                </q-item>

                <q-item
                  v-if="props.row.status === 'PUBLISHED'"
                  clickable
                  v-close-popup
                  @click="closeMusic(props.row.id)"
                >
                  <q-item-section>
                    <q-item-label>下架</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list> -->
            </q-btn-dropdown>
            <!-- <q-btn flat label="编辑" @click="edit(props.row)" /> -->
            <!-- <q-btn color="negative" label="删除" /> -->
          </q-td>
        </template>
      </q-table>
    </div>

    <create-dialog
      v-if="showCreateDialog"
      :data="editData"
      @hide="createDialog.hideDialog()"
      @createMusicSuccess="fetchData"
      @editMusicSuccess="fetchData"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { close, list, publish } from '../../api/music/music';
import { useToggleDialog } from '../../composables/useToggleDialog';
import CreateDialog from './CreateDialog.vue';
import { musicStatus, musicStatusColor } from '../../utils/dict';
import MyNotify from '../../utils/notify';

const columns = [
  // {
  //   name: 'index',
  //   field: 'index',
  //   label: '编号',
  //   align: 'center'
  // },
  {
    name: 'name',
    field: 'name',
    label: '歌曲名',
    align: 'center'
    // style: 'width:50px'
  },
  {
    name: 'description',
    field: 'description',
    label: '简介',
    align: 'center'
  },
  {
    name: 'file',
    field: 'file',
    label: '歌曲',
    align: 'center'
  },
  {
    name: 'status',
    field: 'status',
    label: '上架状态',
    align: 'center'
  },
  {
    name: 'operation',
    field: 'operation',
    label: '操作',
    align: 'center'
  }
];

const data = ref([]);
// const id = ref(data.value.id);

const showCreateDialog = ref(false);
const editData = ref(null);

const createDialog = useToggleDialog(showCreateDialog);

const fetchData = () => {
  list().then(musicList => {
    data.value = musicList;
  });
};

const edit = row => {
  editData.value = row;
  createDialog.showDialog();
  console.log(row);
};

const publishMusic = id => {
  publish(id).then(() => {
    MyNotify.success('音乐上架成功!');
    fetchData();
  });
};
const closeMusic = id => {
  close(id).then(() => {
    MyNotify.success('音乐下架成功!');
    fetchData();
  });
};

onMounted(fetchData);
</script>

<style scoped></style>
